<template>
  <div>
    <h2 class="detail-title">用户基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">用户ID：{{data.userid}}</div>
      <div class="detail-item">用户名：{{data.username}}</div>
      <div class="detail-item">性别：{{data.sexLabel}}</div>
      <div class="detail-item">手机号：{{data.phone}}</div>
      <div class="detail-item">邮箱：{{data.email}}</div>
      <div class="detail-item">用户状态：{{data.statusLabel}}</div>
      <div class="detail-item">用户学号：{{data.studentid}}</div>
      <div class="detail-item">学校名称：{{data.school_name}}</div>
      <div class="detail-item">学院名称：{{data.college_name}}</div>
      <div class="detail-item">专业名称：{{data.major_name}}</div>
      <div class="detail-item">班级名称：{{data.class_name}}</div>
      <div class="detail-item">入学时间：{{data.admission_date}}</div>
    </div>

    <h2 class="detail-title">用户选课信息</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
      <el-table-column width="150" prop="course_id" label="课程ID"></el-table-column>
      <el-table-column width="150" prop="course_name" label="课程名称"></el-table-column>
      <el-table-column width="150" prop="courseTypeLabel" label="课程类型"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="onShowReports(scope.row)" size="small" class="text-button" >查看实验成绩</el-button>
          <el-button @click="onShowExams(scope.row)" size="small" class="text-button" >查看考试成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog
        :close-on-click-modal="false"
        @close="onClose"
        :visible.sync="showReports"
      >
        <el-table :data="reports" style="width: 100%">
          <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="experiment_name" label="实验报告名称"></el-table-column>
          <el-table-column prop="knowledges" label="关联知识点"></el-table-column>
          <el-table-column prop="duration" label="实验时长"></el-table-column>
          <el-table-column prop="score" label="成绩"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="onClose">返 回</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :close-on-click-modal="false"
        @close="onClose"
        :visible.sync="showExams"
      >
        <el-table :data="exams" style="width: 100%">
          <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="id" label="试卷编号 "></el-table-column>
          <el-table-column prop="exam_name" label="试卷名称"></el-table-column>
          <el-table-column prop="duration" label="考试时长"></el-table-column>
          <el-table-column prop="score" label="成绩"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="onClose">返 回</el-button>
        </div>
      </el-dialog>

    <el-button class="go-back-btn" @click="goBack" type="primary">返回</el-button>
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import { studentModel, courseModel } from "@/api/models";
import CreateFilter from "@/mixins/CreateFilter";
export default {
  mixins: [goBack, CreateFilter],
  components: {},
  data() {
    return {
      data: {},
      id: null,
      showReports: false,
      showExams: false,
      reports: [],
      exams: [],
      tableData: []
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getItem();
    this.getCourses();
  },
  methods: {
    getItem() {
      studentModel.item(this.id, (res) => {
        this.data = res.data;
      });
    },
    getCourses() {
      courseModel.list({
        student_id: this.id
      }, (res) => {
        this.tableData = res.data.map(v => {
          v.courseTypeLabel = this.courseTypeToLabel(v.course_type);
          return v
        })
      });
    },
    onClose() {
      this.showReports = false
      this.showExams = false
    },
    onShowReports(row) {
      this.showReports = true
      studentModel.experiments({
        course_id: row.course_id,
        student_id: this.id
      }, res => {
        this.reports = res.data
      })
    },
    onShowExams(row) {
      this.showExams = true
      studentModel.exams({
        course_id: row.course_id,
        student_id: this.id
      }, res => {
        this.exams = res.data
      })
    }
  },
};
</script>
<style lang="scss">
</style>